iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
自我挑戰組

30天的css animation修練系列 第 28

實作 css animation - 滑入顯示文字區塊效果

  • 分享至 

  • xImage
  •  

接續昨天的進度繼續往下寫
實作 css animation - 欄位圖片縮放
首先在 image-box (包圖片的區塊) 下新增有文字內容的區塊

<div class="info-box">
  <div class="info-content">
    <h2>title</h2>
    <span>ography. Constantly inspired by his studies in cinema, he applies cinematic tech</span>
  </div>
</div>

然後針對文字區塊寫樣式,
這邊要注意的是,外層要寫 position:relative; 內層position:absolute;
內層在對位時才不會跑掉

.hover-box .info-box {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom:10px;
  right:10px;
  color:#fff;
  background:rgba(0,0,0,.6);
  text-align:center;
  transform:scaleY(0);
  transition:transform .5s;
} 

.hover-box .info-box .info-content{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding:15px;
}
/*當hover的時候 文字區塊的 Y 軸高度由0變1*/
.hover-box:hover .info-box {
  transform:scaleY(1);
}

到這邊就完成了
附上codepen如下
https://codepen.io/UHU/pen/yQBGpm


上一篇
實作 css animation - 欄位圖片縮放
下一篇
實作 css animation - 火焰效果
系列文
30天的css animation修練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言